@import (reference) "./../shared/common";
@import (reference) "./../shared/color";
@import (reference) "./../shared/constants";
.stock-container,
.middle-box {
  .display-flex(row);
  .left-wrapper,
  .main-container {
    .flex;
  }
}

@width-side-tab: 28px;
@height-top-bar: 30px;
.stock-container {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #E8E8E8;
  overflow: hidden;
}

.watchlist-box {
  position: relative;
  width: @width-watchlist;
  height: 100%;
  background-color: #FFF;
  .flex-shrink(0);
}

.main-container {
  // position: absolute;
  // top: 0;
  // left: 251px;
  // bottom: 0;
  // right: 0;
  height: 100%;
}

.data-change{
  height: 30px;
  border-bottom: 1px solid #EAEAEA;
  margin-left: 30px;
}

.main-view {
  .display-flex(row);
  width: 100%;
  // min-height: calc(~"100% - 280px");
  height: 100%;
  .flex(1, 1, auto);
  margin: 0;
  background: @color-white;
}

@width-detail-box: @width-sidebar-right;
.left-wrapper {
  display: inline-block;
  .display-flex;
  height: 100%;
  // width: calc(~"100% - "(@width-detail-box + 1));
  border-left: @border-simple-dark;
  border-right: @border-simple-dark;
  background-color: @color-gray-light-view-background;
}

.detail-box {
  .display-flex;
  flex-direction: column;
  width: @width-detail-box;
  height: 100%;
  float: right;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  >* {
    width: 100%;
  }
  detail-basic {
    // max-height: 33%;
  }
  .stock-append-table {
    // for index
    height: calc(~"100% - 196px");
    margin-top: 4px;
    // for block
    &.higher {
      height: calc(~"100% - 154px");
    }
  }
  bidask {
    height: 33%;
    min-height: 248px;
  }
  stock-ts {
    height: 34%;
    min-height: 248px;
  }
  bidask {
    flex-shrink: 1;
    width: 100%;
    border-bottom: @border-simple-dark;
  }
  bidask,
  stock-ts {
    margin-bottom: 0;
    flex-grow: 1;
  }
}

.top-bar {
  // .display-flex(row,@justify-content: flex-start, center);
  display: flex;
  height: @height-top-bar;
  background: #fff;
  border-bottom: @border-simple-dark;
  .drawer-toggle {
    line-height: @height-top-bar;
    display: inline-block;
    padding:0 4px;
    img{ padding-top: 1px}
  }
  .left-part {
    flex: 1;
    position: relative;
    // width: calc(~"100% - 300px");
    border-left: 1px solid #D1D1D1;
    // .display-flex(row, flex-start, center);
    // .flex;
    .span-title {
      font-size: 15px;
      line-height: 30px;
      font-weight: 700;
      margin-left: 6px;
      margin-right: 10px;
      float: left;
    }
    .zytg-ul {
      width: calc(~"100% - 200px");
      min-width: 100px;
      height: 30px;
      overflow: hidden;
      margin: 0;
      display: inline-block;
      .zytg-li {
        display: inline-block;
        font-size: 14px;
        color: #000;
        padding: 3px 12px;
        margin-top: 3px;
        margin-right: 2px;
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        cursor: pointer;
        &.active {
          color: #fff;
          background: #FA3D41;
          border: 1px solid #FA3D41;
        }
        &.disabled {
          border: 1px solid #DDD;
          background-color: #F5F5F5;
          color:#ACA899;
        }
      }
      
    }
    .target-toggle{
      position: absolute;
      right: 70px;
      top: 8px;
      display: none;
    }
    #dropdown{
      position: absolute; 
      top: 32px;
      right: 12px;
      width: 100px;
      background: #fff;
      border: 1px solid #eee;
      z-index: 100;
      display: none;
      .dropdown-ul{
        margin: 0;
        font-size: 14px;
        text-align: center;
      }
      .dropdown-li{
        height: 25px;
        line-height: 24px;
        border-bottom: 1px solid #eee;
        &:hover{
          background: #ebebeb;
        }
        &.active{
          background: #ebebeb;
        }
      }
    }
  }
  .right-part {
    width: 340px;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #e2e2e2;
    transition: width 0.2s;
    box-sizing: content-box;
    // .flex-grow(1);
    // .display-flex(row, flex-end, center);
    &.active {
      width: 0;
    }
  }
}

@height-info-box: 36.78%;
.middle-box {
  height: calc(~"100% - "(@height-top-bar));
  background-color: #EEE;
  .info-box {
    margin: 0;
    // margin: @space-common;
    height: @height-info-box;
    background-color: @color-gray-light-view-background;
    border-top: 1px solid @color-gray-main;
  }
  // 个股首页导航
  .stock-nav {
    width: @width-side-tab;
    height: 100%;
    display: inline-block;
    border-right: 1px solid #EAEAEA;
    background-color: @color-white;
    .cm-tab-list {
      list-style: none;
      padding-left: 0;
      margin: 0;
      text-align: center;
      li {
        width: 100%;
        height: 130px;
        display: block;
        border-bottom: 1px solid #EAEAEA;
        padding: 4px 0;
        margin-bottom: 2px;
        background: #FFF;
        color: #666;
        cursor: pointer;
        &.active {
          color: #FFF;
          background-color: #FF6D6C;
        }
      }
      .chart-li,
      .tick-li {
        padding: 14px 0;
      }
      //li:hover {
      //  opacity: .7;
      //}
    }
  }
  // 内容区域
  .stock-content-view {
    // float: right;
    // width: calc(~"100% - "@width-side-tab);
    // width: calc(~"100% - "@width-side-tab);
    // padding: @space-common * 0.6 @space-common ;
    .display-flex;
    .flex;
    position: relative;
    height: 100%;
    overflow: hidden;
  }
}

.loader {
  .transition;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.3);
  &.loading {
    z-index: 100;
    opacity: 1;
  }
  .fa {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%, 0);
    color: white;
  }
}

.stock-container {
  .main-container {
    .left-wrapper {
      .display-flex;
      
    }
  }
}